<template>
	<view class="bill">
		<view class="bill-top">
			<view class="bill-time" @click="selectTime">{{ times.length ? times[0] + '年' + times[1] + '月' : '全部' }}</view>
			<view class="bill-total">￥{{ pageData.sum }}</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="bill-list">
			<view class="bill-item" v-for="(item, index) in pageData.list" :key="index">
				<view class="bill-left">
					<view class="title">{{ item.name }}</view>
					<view class="time">{{ formatData(item.time) }}</view>
				</view>
				<view class="bill-right">+{{ item.profit }}</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<uni-load-more :status="status"></uni-load-more>
		<!-- 选择日期 -->
		<billTime ref="times" @time="bindTime" />
	</view>
</template>

<script>
import { xInvite } from '@/api/index.js';
import { formatData } from '@/util/time.js';
import billTime from '../components/bill-time/index.vue';
export default {
	components: {
		billTime
	},
	data() {
		return {
			times: [],
			openid: '',
			page: 1,
			status: 'loading',
			pageData: {
				list: [],
				pagenum: 1,
				sum: 0,
				total: 0
			} //接口返回的数据
		};
	},
	created() {
		this.openid = uni.getStorageSync('openid');
		this.xInvite();
	},
	methods: {
		formatData,
		async xInvite() {
			this.status = 'loading'
			const res = await xInvite({
				openid: this.openid,
				page: this.page,
				month: this.times.length ? `${this.times[0]}-${this.times[1]}` : ''
			});
			res.list = this.pageData.list.concat(res.list);
			this.pageData = res;
			this.status = 'more';
			if (res.total == 0) {
				this.status = 'noMore';
			}
		},
		// 选择时间
		selectTime() {
			this.$refs.times.open();
		},
		// 确定选择的时间
		bindTime(times) {
			this.times = times;
			this.page = 1,
			this.pageData.list = []
			this.status = 'loading'
			this.xInvite();
			this.$refs.times.close();
		}
	},
	// 分页
	onReachBottom() {
		if (this.pageData.total == this.page) {
			this.status = 'noMore';
			return false;
		}
		this.page++;
		this.xInvite();
	}
};
</script>

<style scoped lang="scss">
.bill {
	font-family: PingFangSC-Regular, PingFang SC;
	.bill-top {
		width: 100%;
		height: 120rpx;
		background: #f6f6f6;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		.bill-time {
			color: #171717;
			font-size: 32rpx;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: -34rpx;
				width: 30rpx;
				height: 32rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-zhangdan-xiala.png) no-repeat center center;
				background-size: 28rpx 28rpx;
			}
		}
		.bill-total {
			color: #262626;
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.bill-list {
		padding-left: 40rpx;
		.bill-item {
			display: flex;
			height: 160rpx;
			padding: 36rpx 40rpx 0 0;
			box-sizing: border-box;
			border-bottom: 2rpx solid #f5f5f5;
			&:nth-last-of-type(1) {
				border-bottom: none;
			}
			.bill-left {
				flex: 1;
				.title {
					width: 480rpx;
					color: #262626;
					font-size: 36rpx;
					margin-bottom: 4rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.time {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.bill-right {
				font-size: 36rpx;
				font-weight: 600;
				color: #fa8384;
			}
		}
	}
	/*
	<view class="bill-list">
		<view class="bill-item">
			<view class="bill-left">
				<view class="title">蓝猫卖出推广收益</view>
				<view class="time">5月25日 11：45</view>
			</view>
			<view class="bill-right">+50.00</view>
		</view>
	*/
}
</style>
